import React from 'react'
import { Grid ,Image} from 'react-vant';
import { LISTITEMTYPE } from '../Type/Store.d';
import { useNavigate  }from 'react-router-dom';

interface CHILDRENPROPS {
    ChildrenList:LISTITEMTYPE[]
}
function ChildrenItem(props:CHILDRENPROPS) {
    let { ChildrenList } = props;
    const Navigate = useNavigate();
    return (
        <div className='ChildrenItem'>
            <Grid columnNum={2}>
                {ChildrenList.map((v, i) => (
                    <Grid.Item key={i} onClick={()=>Navigate('/Detail/'+v.id,{state:v})}>
                        <Image width="100" height="100" src={v.src} />
                        <p>{v.txt}</p>
                        <p>￥{v.price}元</p>
                    </Grid.Item>    
                ))}
            </Grid>
        </div>
    )
}

export default ChildrenItem